<template>
  <div class="login-container">
    <!-- ref="loginRefs" 创建子组件引用 -->
    <!-- :model="loginForm" 绑定登录表单 -->
    <!-- :rules="loginRules" 绑定登录规则 -->
    <el-form
      ref="loginRefs"
      :model="loginForm"
      :rules="loginRules"
      class="login-form"
      label-position="top"
    >
      <h2 class="login-title">登录</h2>
      <el-form-item label="账号" prop="username">
        <el-input v-model="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="loginForm.password"></el-input>
      </el-form-item>
      <el-form-item class="login-button">
        <el-button type="primary" @click="loginSubmit">登录</el-button>
        <el-button type="primary" @click="loginSubmit">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
  <img src="../assets/logo.svg" alt="" srcset="" />
</template>

<script setup>
  import { ref, reactive } from "vue";
  // 创建登录表单
  const loginForm = reactive({
    username: "",
    password: "",
  });

  // 创建表单验证规则
  const loginRules = {
    username: [
      {
        required: true,
        message: "请输入账号",
        trigger: "blur",
      },
    ],
    password: [
      {
        required: true,
        message: "请输入密码",
        trigger: "blur",
      },
    ],
  };

  // 创建表单引用
  const loginRefs = ref();

  const loginSubmit = () => {
    // 数据验证
    loginRefs.value.validate((valid) => {
      if (valid) {
        // 表单验证成功逻辑
        ElMessage.success("登录成功");
      } else {
        // 表单验证失败逻辑
        ElMessage.error("请检查输入内容正确性");
        return;
      }
    });
  };
</script>

<style scoped>
  .login-button:deep() div {
    display: flex;
    justify-content: flex-end;
  }
  @keyframes slideUp {
    0% {
      opacity: 0;
      transform: translateY(60px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .login-container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .login-form {
    width: 400px;
  }
  .login-title {
    font-size: 24px;
    margin-bottom: 20px;
    animation-name: slideUp;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
  }
</style>
